<!-- ButtonWidget.vue -->
<template>
    <WidgetContainer :widget-id="config.id">
        <el-button @click="onClick" :style="{ width: config.attributes.width }" :type="config.attributes.basicType" :size="config.attributes.size" :plain="config.attributes.plain"
            :round="config.attributes.round" :circle="config.attributes.circle" :disabled="config.attributes.disabled" :class="config.attributes?.cssClass">
            {{ config.attributes.text }}
        </el-button>
    </WidgetContainer>
</template>

<script setup>
import { inject } from 'vue'
import { ElButton } from 'element-plus';
import { executeEventHandler } from '@/utils/eventExecutor'

const formData = inject('formData')
const widgetList = inject('widgetList')

const props = defineProps({
    config: {
        type: Object,
        required: true,
    },
});

const onClick = () => {
    executeEventHandler(props.config.events?.onClick, { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value })
}
</script>